<template>
  <div class="container">
    <div class="delete el-icon-circle-close" @click.stop="del"></div>
    <img class="wall_paper"
         src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506063505463&di=0ec510372a6e468b605a29b5c5c765e6&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F782cabc158c57d9e198e025060991146c5bb482c.jpg"
         alt="">
    <div class="group_logo">
      <a href="javascript:" @click="goto">
        <img :src="user.avatar"
             alt="头像"></a>
    </div>
    <div class="username">{{user.id}}{{user.name}}</div>
    <div class="user-atten">
      <div>
        <div class="follow">{{user.follow}}<br>关注</div>
        <div class="group">{{user.group}}<br>群组</div>
        <div class="moment">{{user.moment}}<br>分享</div>
      </div>
    </div>


  </div>
</template>
<script>
  export default {
    props: ['user'],
    data () {
      return {}
    },
    methods: {
      goto () {
        this.$router.push({name: 'main', params: {role: this.user.id}})
      },
      del () {
        this.$emit('del', this.user.id)
      }
    }
  }

</script>
<style scoped>
  .container {
    font-size: 0.8em;
    border-radius: 4px;
    background: #fff;
    /*box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2);*/
    box-sizing: border-box;
    width: 230px;
    height: 165px;
    text-align: center;
  }

  .delete {
    /*background: #7fff5b;*/
    color: #f00;
    border-radius: 50%;
    border: 4px solid white;
    display: inline-block;
    font-size: 0;
    float: right;
    position: absolute !important;
    right: 0;
    transform: translateX(50%) translateY(-50%);
    transition: font-size .1s ease-in;
  }

  .container:hover .delete {
    font-size: 20px;
    transition: font-size .1s ease-in;
  }

  .wall_paper {
    width: 100%;
    height: 75px;
    background: red;
  }

  .group_logo img {
    background: pink;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 1px #fff;
  }

  .group_logo {
    margin-top: -45px;
  }

  .username {
    font-weight: bold;
    /*margin: 5px 0;*/
  }

  .user-atten > div > div {
    height: 33px;
    /*background: red;*/
    width: 66px;
    float: left;
    /*display: inline-block;*/
    border-right: 1px solid rgba(0, 0, 0, 0.66);
  }

  .user-atten {
    margin: 3px auto 0;
    width: 198px;
    overflow: hidden;
  }

  .user-atten > div {
    overflow: hidden;
    margin: 0 2px;
    width: 201px;
  }
</style>
